---
title: Zustand
description: This doc describes Zustand extension.
nav: 4.98
keywords: zustand
published: false
---

Jotai's state resides in React, but sometimes it would be nice
to interact with the world outside React.

Zustand provides a store interface that can be used to hold some values
and sync with atoms in Jotai.

This only uses the vanilla api of zustand.

### Install

You have to install `zustand` and `jotai-zustand` to use this feature.

```
npm i zustand jotai-zustand
```

## atomWithStore

`atomWithStore` creates a new atom with zustand store.
It's two-way binding and you can change the value from both ends.

```jsx
import { useAtom } from 'jotai'
import { atomWithStore } from 'jotai-zustand'
import create from 'zustand/vanilla'

const store = create(() => ({ count: 0 }))
const stateAtom = atomWithStore(store)
const Counter = () => {
  const [state, setState] = useAtom(stateAtom)

  return (
    <>
      count: {state.count}
      <button
        onClick={() => setState((prev) => ({ ...prev, count: prev.count + 1 }))}
      >
        button
      </button>
    </>
  )
}
```

### Examples

<CodeSandbox id="mqtugt" />
